<template>
  <div class="tree-container-t" @contextmenu.prevent="()=>false">
    <el-input class="tree-input" placeholder="输入关键字进行过滤" v-model="filterText">
      <i slot="prefix" class="el-input__icon el-icon-search search"></i>
    </el-input>
    <div class="margin"></div>
    <div class="tree-box">
      <el-tree
        :data="data"
        icon-class="custom"
        :props="defaultProps"
        ref="tree"
        :filter-node-method="filterNode"
        lazy
        :load="loadNode"
        node-key="id"
        @node-click="handleNodeClick"
        :default-expanded-keys="expandedKes"
      ></el-tree>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue, Prop } from "vue-property-decorator";
import { ParameterManagementModule } from "@/store/modules/ParameterManagement";
import { Tree } from "element-ui";
@Component
export default class extends Vue {
  @Prop() tabId!: any;
  @Prop() flag!: any;
  defaultProps: Object = {
    children: "children",
    label: "name",
    isleaf: "leaf",
  };
  filterText: string = "";
  data: Array<any> = [];
  data2 = [];
  data3 = [];
  data4 = [];
  datafrom = {};
  ssdsId = "";
  type = "";
  $refs!: {
    tree: Tree;
  };
  @Watch("filterText")
  private watchfilterText(val: string) {
    let tree = this.$refs.tree;
    // console.log(tree);
    if (tree) {
      tree.filter(val);
    }
  }
  @Watch("$route", { immediate: true, deep: true })
  private router(val: string) {
    // console.log(val);
    ParameterManagementModule.getTreeId("0");
  }
  handleNodeClick(data: any, node: any) {
    this.type = data.type;
    console.log(data, node);
    if (node.level == 1) {
      let form: any = {};
      form.id = "";
      form.type = data.type;
      form.ssds = data.id;
      form.size = "20";
      form.page = "1";
      // console.log(form);
      ParameterManagementModule.getTreeobj(form);
      ParameterManagementModule.getRigthListArea(form);
    } else if (
      data.type == "xcompany" ||
      data.type == "vo" ||
      data.type == "v5"
    ) {
      let form: any = {};
      form.id = data.id;
      form.type = data.type;
      form.ssds = this.ssdsId;
      form.size = "20";
      form.page = "1";
      console.log(node.data);

      if (node.data.type == "vo") {
        form.level = node.level;
      } else {
        form.level = "";
      }
      // console.log(form);
      ParameterManagementModule.getTreeobj(form);
      ParameterManagementModule.getRigthListArea(form);
    }

    ParameterManagementModule.getTreeId(data.type);
    // console.log(data.name);
    let oldId = data.parentId;
    let newparentId = "";
    if ((data.type == "sb" || data.type == "cd") && (oldId.indexOf("#") >-1)) {
      // console.log(111111111);
      newparentId = oldId.slice(3, oldId.length);
    } else {
      newparentId = oldId;
    }
    var fzsbCS = {
      name: data.name,
      id: data.id,
      ssdsId: this.ssdsId,
      parentId: newparentId,
      bdzId: data.bdzId,
      treeId: node.id,
    };
    // console.log(fzsbCS);

    ParameterManagementModule.gettreeSbId(fzsbCS);
  }

  filterNode(value: string, data: { name: string }) {
    if (!value) return true;
    return data.name.indexOf(value) !== -1;
  }
  //拿变电站ID

  treeData(node, result) {
    var bdzId = "";
    var nodeData = node.data;
    if (nodeData.type === "station") {
      bdzId = nodeData.id;
    } else if (nodeData.bdzId) {
      bdzId = nodeData.bdzId;
    }
    console.log(result.data);

    result.data.forEach((item) => {
      item.bdzId = bdzId;
      if (item.type === "station") {
        item.bdzId = item.id;
      }
    });
  }
  expandedKes = [];
  // 树图懒加载
  loadNode(node, resolve) {
    // console.log(node);

    if (node.level == 1) {
      this.handleNodeClick(node.data, node);
    }
    (this as any).datafrom = {};
    this.datafrom["parentid"] = node.data.id;
    this.datafrom["type"] = node.data.type;
    this.datafrom["level"] = node.level;

    // 辅助监控
    if (this.tabId == "fzjk") {
      (this as any).$services
        .getFksbTree({ data: this.datafrom })
        .then((result: any) => {
          if (result.data) {
            if (node.level == 0) {
              this.ssdsId = result.data[0].id;
              this.expandedKes.push(result.data[0].id);
            }
            this.treeData(node, result);
            resolve(result.data);
          } else {
            resolve([]);
          }
        })
        .catch((err: object) => {
          resolve([]);
          console.log(err);
        });
    }
    // 另外三个
    if (this.tabId == "zxjc" || this.tabId == "jqr" || this.tabId == "sxt" || this.tabId == "qt") {
      this.datafrom["flag"] = this.flag;
      (this as any).$services
        .getTreeMenu({ data: this.datafrom })
        .then((result: any) => {
          if (result.data) {
            if (node.level == 0) {
              this.ssdsId = result.data[0].id;
              this.expandedKes.push(result.data[0].id);
            }
            this.treeData(node, result);
            resolve(result.data);
          } else {
            resolve([]);
          }
        })
        .catch((err: object) => {
          resolve([]);
          console.log(err);
        });
    }
  }

  mounted() {
    // console.log(ParameterManagementModule.TreeId);
  }
  @Watch("tabId", { immediate: true, deep: true })
  public ControlDisplay(to: any, from: any) {
    // console.log(this.tabId);
  }
  @Watch("flag", { immediate: true, deep: true })
  public ControlD(to: any, from: any) {
    // console.log(this.flag);
  }
}
</script>

<style lang="scss" scoped>
.tree-container-t {
  width: 100%;
  height: 100%;
  .custom-tree-node {
    width: 100%;
    height: 0.3rem;
    box-sizing: border-box;
    line-height: 0.3rem;
    .context-menu {
      span {
        margin: 0rem 0.02rem;
      }
    }
  }
  .tree-input {
    width: 100%;
  }
  .margin {
    height: 0.1rem;
  }
  .search {
    width: 0.3rem;
    height: 0.3rem;
    border-right: 1px solid #717ca1;
    color: #9eeaec;
  }
  .tree-box {
    height: calc(100% - 0.46rem);
    overflow-y: auto;
  }
}
</style>
<style lang="scss" >
.tree-container-t {
  // .el-tree{
  //   padding: 0 0.2rem;
  // }
}
</style>
